// import { FC,useEffect } from 'react';

// const DepAdd: FC<any> = (props:any): JSX.Element => {

//     useEffect(()=>{
//     },[])

//     return (
//       <div>部门添加修改</div>
//     )
// }
// export default DepAdd;




import React from "react";
import { Form, Input, Button, Checkbox, Cascader,message } from 'antd';
import FormItem from "antd/lib/form/FormItem";
import { useState, useEffect, useRef } from 'react';
import { Apideplist, DeparmentsAdd } from '../../apis/dep';
import '../../static/css/department/depaddupda.css'
import { useNavigate } from "react-router";
interface IDepartment {
    id: number,
    name: string,
    parent_id: number,
    user: string,
    user_mobile: string | null,
    openid: number | null,
    son: Array<IDepartment>
}
const DepUpda: React.FC<any> = () => {
    const [depparment, setDepparment] = useState<Array<IDepartment>>()
    const navrigat = useNavigate()
    const deplist = async () => {
        let res = await Apideplist()
        if (res.code === '00000') {

            setDepparment(res.data)
        }
    }
    
    useEffect(() => {
        deplist()
        
    }, [])
    const onFinish = async(values: any) => {
        values.parent_id = values.parent_id.slice(-1).toString()
        let res = await DeparmentsAdd(values)
        console.log(res);
        if(res.code == '00000'){
            navrigat('/index/department')
            message.success('添加成功');
        }

    };

    const onFinishFailed = (errorInfo: any) => {
        
        console.log('Failed:', errorInfo);
    };
    const onChange = (value: any[]) => {
        console.log(value);
    };
    return (
        <div>
            <h1>添加</h1>
            <Form
                name="basic"
                labelCol={{ span: 2 }}
                wrapperCol={{ span: 4 }}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
                
            >
                <Form.Item label='选择父级部门' name="parent_id">
                    <Cascader fieldNames={{ label: "name", value: "id", children: "son" }} options={depparment} onChange={onChange} changeOnSelect placeholder='请选择父级部门' />
                </Form.Item>
                <Form.Item
                    label="部门名称"
                    name="name"
                    rules={[{ required: true, message: '请填写部门名称' }]}
                >
                    <Input placeholder="请输入部门名称" />
                </Form.Item>
                <Form.Item
                    label="负责人名称"
                    name="user"
                    rules={[{ required: true, message: '请填写负责人名称' }]}
                >
                    <Input placeholder="请输入负责人名称" />
                </Form.Item>
                <Form.Item
                    label="负责人手机号"
                    name="user_mobile"
                    rules={[{ pattern: /^1[3|4|5|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号', required: true }]}
                >
                    <Input placeholder="请输入负责人手机号" />
                </Form.Item>
                <Form.Item
                    label="openid"
                    name="openid"
                    rules={[{ required: true, message: '请填写openid' }]}
                >
                    <Input placeholder="请输入openid" />
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 2, span: 4 }}>
                    <Button type="primary" htmlType="reset" id="reset">
                        重置
                    </Button>
                    <Button type="primary" htmlType="submit">
                        添加
                    </Button>
                </Form.Item>
            </Form>
        </div>
    )
}
export default DepUpda